<template>
  <view class="page-user-card">
    <u-navbar back-text=""></u-navbar>
    
    <view class="base-info">
      <u-avatar :src="currUserCard.avatar" mode="square" size="120"></u-avatar>
      <view>
        <view class="nick">{{currUserCard.nick}}</view>
        <view class="gender">{{currUserCard.gender}}</view>
      </view>
    </view>
    
    <view class="sign">
      <text class="label">个性签名</text>
      <text>{{currUserCard.sign}}</text>
    </view>
    
    <view v-if="!currUserCard.isFriend" class="add" @click="add">添加到通讯</view>
    <view v-else class="add" @click="chat">发消息</view>
  </view>
</template>

<script>
  import { mapState } from 'vuex';
  export default {
    computed: {
      ...mapState({
        currUserCard: (state) => state.app.currUserCard,
        myInfo: (state) => state.app.myInfo
      })
    },
    methods: {
      chat () {
        uni.navigateTo({
          url: '/pages/chat/chat?id=p2p-' + this.currUserCard.account
        })
      },
      add () {
        window.nim.applyFriend({
            account: this.currUserCard.account,
            ps: `我是${this.myInfo.nick}`
        });
      }
    }
  }
</script>

<style scoped lang="scss">
  .page-user-card {
    background: #eee;
    height: 100vh;
  }
  .base-info {
    display: flex;
    align-items: center;
    padding: 30rpx;
    background: #fff;
  }
  .nick {
    font-size: 36rpx;
    margin-left: 40rpx;
  }
  .gender {
    margin-left: 40rpx;
  }
  .sign {
    padding: 30rpx;
    font-size: 32rpx;
    background: #fff;
    margin-top: 20rpx;
    .label {
      margin-right: 30rpx;
    }
  }
  
  .add {
    background: #fff;
    padding: 30rpx;
    margin-top: 20rpx;
    font-size: 32rpx;
    color: #366092;
    text-align: center;
  }
</style>
